`, react: `// app/layout.tsx import Script from 'next/script'; `, }; const handleCopy = () => { setCopied(true); setTimeout(()=>setCopied(false), 1400); }; return ( }>

Widget · live on praatbox.com

Tweak the look and behavior. Changes preview live; publish when you're ready. Currently serving 4 sites · 184 conversations today.

v 4.2.0 · LIVE
{/* CONTROLS */}

Brand

How the widget looks. Colour, copy, voice.
Accent colour
Header background, send button, focus rings.
{COLORS.map((c) => ( ))} setColor(e.target.value)} style={{width:32,height:32,border:"none",background:"none",cursor:"pointer",borderRadius:8}}/>
Greeting
First line a visitor sees. Keep it short and human.
setGreet(e.target.value)} style={{width:"100%",border:"1px solid var(--line)",borderRadius:9,padding:"10px 12px",fontFamily:"inherit",fontSize:14,color:"var(--ink)",background:"var(--paper)"}}/>
Avatar
Shown in the header next to the name.
P
Display name
Appears next to the avatar in the header.
Position
Where the launcher sits on the page.
{POSITIONS.map((p) => )}

Behaviour

When and how it appears. What it does when you're not around.
{}} /> {}} />

Install snippet

Drop into your site's <body>. Same snippet, four shapes.
{Object.keys(snippets).map((k) => ( ))} 
]+>)/g, m => `${m}`)
                  .replace(/(\b(?:const|let|var|import|from|function|return|new|window|document)\b)/g, '$1')
                  .replace(/('[^']*'|"[^"]*")/g, '$1')
                  .replace(/(#[^\n]*|\/\/[^\n]*|<!--[^\n]*-->|\{%[^%]*%\})/g, '$1')
                }} />
                

                  WIDGET ID: wgt_glodinas_eu · LIVE

Installations · 4 sites

Each gets its own snippet, conversations are tagged automatically.
{[ {n:"praatbox.com", e:"Production · all visitors", c:"184 today", st:"is-ok"}, {n:"staging.praatbox.com", e:"Webflow staging · IP-restricted", c:"3 today", st:"is-info"}, {n:"glodinas.com", e:"Customer install · trial", c:"42 today", st:"is-ok"}, {n:"app.modlinhome.com", e:"Customer install · production", c:"61 today", st:"is-ok"}, ].map((i) => (
{i.n}
{i.e}
{i.c} LIVE
))}
{/* PREVIEW */}
Live preview
praatbox.com/pricing
{/* widget header */}
P
{showName && Praatbox · Glodinas}
{greet}
{hours? "Replying in ~1 minute · weekdays 9-5 CET" : "Always on, 24/7"}
{/* messages */}
Hi! Asking about EU pricing — is VAT included for a Serbian company?
For a Serbian PIB, reverse-charge applies — no VAT added at checkout.
{/* suggested */}
SUGGESTED
{["Show me an invoice example","Walk me through upgrade","Talk to a human"].map((s) => ( ))}
{/* input */}
Type your message…
{voice && }
{/* footer */}
POWERED BY PRAATBOX
{/* launcher dot */}
SIZE 14 KB GZ · INDEPENDENT OF YOUR APP BUNDLE WCAG 2.1 AA
); } ReactDOM.createRoot(document.getElementById("root")).render();